<template>
  <el-dialog v-model="visible" :title="form.id ? '编辑菜单' : '添加菜单'" width="600px" @closed="resetForm">
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="菜单名称：" prop="title">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="上级菜单：">
        <el-select v-model="form.parentId" placeholder="请选择菜单">
          <el-option v-for="item in selectMenuList" :key="item.id" :label="item.title" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="前端名称：" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="前端图标：" prop="icon">
        <IconSelect v-model="form.icon" />
      </el-form-item>
      <el-form-item label="是否显示：">
        <el-radio-group v-model="form.hidden">
          <el-radio :value="0">是</el-radio>
          <el-radio :value="1">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="排序：">
        <el-input v-model="form.sort"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { fetchList, createMenu, updateMenu, getMenu } from '@/api/menu'
import { ref } from 'vue'
import { ElMessage, type FormInstance } from 'element-plus'
import type { Menu } from '@/models/menu'
import IconSelect from '@/components/IconSelect/index.vue'

defineOptions({ name: 'MenuDetail' })
const rules = {
  title: [
    { required: true, message: '请输入菜单名称', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
  ],
  name: [
    { required: true, message: '请输入前端名称', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
  ],
  icon: [
    { required: true, message: '请输入前端图标', trigger: 'blur' },
    { min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur' },
  ],
}
const emit = defineEmits(['refresh'])
const visible = ref(false)
const form = ref<Menu>({})
const selectMenuList = ref<Menu[]>([])
const formRef = ref<FormInstance>()

async function getSelectMenuList() {
  const response = await fetchList(0, { pageSize: 100, pageNum: 1 })
  selectMenuList.value = response.data.data.list
  selectMenuList.value.unshift({ id: 0, title: '无上级菜单' })
}
async function onSubmit() {
  await formRef.value?.validate()
  if (form.value.id) {
    await updateMenu(form.value.id, form.value)
    ElMessage.success('修改成功')
  } else {
    await createMenu(form.value)
    formRef.value?.resetFields()
    ElMessage.success('提交成功')
  }
  emit('refresh')
  visible.value = false
}
function resetForm() {
  formRef.value?.resetFields()
  form.value = {}
}

const show = async (id?: number) => {
  visible.value = true
  if (id) {
    const res = await getMenu(id)
    form.value = res.data.data
  } else {
    form.value = {}
  }
  selectMenuList.value.length || getSelectMenuList()
}

defineExpose({ show })
</script>

<style scoped></style>
